<template>
  <div class="list">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="left">
          <el-input
            placeholder="请输入搜索内容"
            v-model="searchInput"
            clearable
            prefix-icon="el-icon-search"
            @keyup.enter.native="searchEnterFun"
          >
          </el-input>
          <el-button type="primary" icon="el-icon-search" @click="getGoodsList"
            >搜索</el-button
          >
        </div>
        <div class="right">
          <el-button type="success" icon="el-icon-plus" @click="addGood"
            >添加商品</el-button
          >
        </div>
      </div>
      <el-table
        :data="goodsList"
        border
        style="width: 100%"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
      >
        <el-table-column type="index" label="#" width="50"></el-table-column>
        <el-table-column prop="goods_name" label="商品名称" width="420">
        </el-table-column>
        <el-table-column prop="goods_price" label="商品价格" width="100">
        </el-table-column>
        <el-table-column width="80" prop="goods_weight" label="重量(kg)">
        </el-table-column>
        <el-table-column prop="add_time" label="创建时间" width="180">
          <template v-slot="{ row }">
            {{ row.add_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="upd_time" label="更新时间" width="180">
          <template v-slot="{ row }">
            {{ row.upd_time | dateFormat }}
          </template>
        </el-table-column>
        <el-table-column prop="upd_time" label="操作">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              @click="clickGood(row, 'edit')"
              >修改</el-button
            >
            <el-button
              icon="el-icon-delete"
              type="danger"
              @click="clickGood(row, 'del')"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <Pagination
        :total="total"
        :page.sync="pagenum"
        :limit.sync="pagesize"
        @pagination="getGoodsList"
      />
    </el-card>
  </div>
</template>
<script>
import { getGoodsList, deleteGood } from '@/api/goods'
import Pagination from '@/components/Pagination'
export default {
  name: 'GoodList',
  components: {
    Pagination
  },
  props: {},
  data() {
    return {
      goodsList: [],
      searchInput: '',
      pagenum: 1,
      pagesize: 20,
      total: 0,
      copy: ''
    }
  },
  methods: {
    addGood() {
      this.$router.push({
        name: 'addgood',
        params: {
          type: 'create'
        }
      })
    },
    clickGood(good, type) {
      if (type === 'del') {
        this.$confirm('该操作将永久删除该商品，是否继续？', '删除商品', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'error'
        }).then(() => {
          deleteGood(good.goods_id).then(() => {
            this.getGoodsList()
          })
        })
      } else if (type === 'edit') {
        // this.$router.push({
        //   name: 'addgood',
        //   params: {
        //     type: 'edit',
        //     data: good
        //   }
        // })
        this.$message.warning('暂未实现该功能')
      }
    },
    searchEnterFun(e) {
      if (e.key === 'Enter' && e.keyCode === 13 && this.query) {
        this.getGoodsList()
      }
    },
    async getGoodsList() {
      let { copy, searchInput } = this
      if (copy !== searchInput) {
        this.pagenum = 1
      }
      try {
        const { data: res } = await getGoodsList({
          query: searchInput,
          pagenum: this.pagenum,
          pagesize: this.pagesize
        })
        this.copy = this.searchInput
        this.goodsList = res.goods
        this.total = res.total
        console.log(res)
      } catch (error) {
        this.searchInput = ''
      }
    }
  },
  computed: {},
  watch: {
    // 这样有点问题
    // searchInput: function(newVal, oldVal) {
    //   if (newVal !== oldVal) {
    //     this.pagenum = 1
    //   }
    // }
  },
  created() {
    this.getGoodsList()
  }
}
</script>
<style lang="scss" scoped>
.clearfix {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  position: relative;
  .left {
    .el-input {
      width: 300px;
    }
    .el-button {
      width: 100px;
      margin-left: 30px;
    }
  }
  .right {
    position: absolute;
    right: 0;
    top: 0;
    .el-button {
      width: 180px;
    }
  }
}
</style>
